<template>
	<view class="goods_list">
		
	    <view   class="goods_item"     v-for=" item in  GOODS"     @click="navigatorgoods(item.id)" :key="item.id"> 
		      <image :src="imgurl" mode=""></image>
			  <view class="price">
				  <text>{{item.sell_price}}</text>
				  <text>{{item.market_price}}</text>
			  </view>
			  <view  class="name">
				  {{item.title}}
			  </view>
		</view>
			
			
	</view>
</template>

<script>
	
	export  default  {
		
		data(){
			return  {
				
				 imgurl:'https://img2.woyaogexing.com/2023/02/13/b504a6b098a46c4c946fc0f73d65e53f.jpg',
			}
			
			
		},
		
		
		props:['GOODS'],
		methods:{
			
			navigatorgoods(id){
				  this.$emit('goodsItemEvt',id)
			}
		}
	}
</script>

<style  lang="scss"  scoped>
	
	.goods_list{
				 padding: 0  15rpx;
				 display: flex;
				 flex-wrap: wrap;
				 justify-content: space-between;
				> .goods_item{
				       background-color: #fff;
							width: 355rpx;
							margin: 10rpx  0;
									
								// 盒子模型会自动根据padding和border的值来调整content的值，就不需要手动调整
								    padding: 15px;// 加上这句，盒子会变大，所以可以把盒子转化为怪异盒模型
						    box-sizing: border-box; 
							>image{
								width: 90%;
								height: 200px;
										display: block;
										margin:  0  auto ;
								
							}
									>.price{
										color: $shop-color;
										font-size: 36rpx;
										margin:20rpx 0 10rpx 0 ;
										text:nth-child(2){
											color: #eee;
											font-size: 28rpx;
											margin-left: 17rpx;
											// 给文字画条删除线
											text-decoration: line-through;
											
										}
									}
									
									>.name{
										font-size: 28rpx;
										line-height: 50rpx;
										padding-bottom: 15rpx;
										padding-top: 10px;
										
									}
				 }
	}
</style>